<template>

    <div class="groupQRCode">
        <img class="avatar" :src="groupAvatar">
        <div class="name">{{ $t('msg.群聊') }}: {{ groupName }}</div>
        <img class="qr_code" :src="qrCodeUrl">
    </div>
</template>

<script>
export default {
    props: {
        id: {
            type: [Number, String],
            default: ""
        }
    },
    data() {
        return {
            groupAvatar: '', // 群头像
            groupName: '', // 群名称
            qrCodeUrl: '', // 二维码URL
        }
    },
    watch: {
        id: {
            async handler(value) {
                this.$api.imApi.getContactsAPI().then(res => {
                    let list = res.data;
                    list = list.filter(item => item.is_group == 1);
                    const sorted = list.sort((a, b) => {
                        if (a.index === '#') return 1;
                        if (b.index === '#') return -1;
                        return a.index.localeCompare(b.index, 'zh');
                    });
                    let item = list.find(item => item.id == value);
                    this.groupAvatar = item.avatar;
                    this.groupName = item.displayName;
                })
                let data = await this.$api.usersApi.createQrcodeImage({
                    group_id: value
                });
                this.qrCodeUrl = data.qrcode_url;
            },
            immediate: true
        }
    }
}
</script>

<style scoped lang="scss">
.groupQRCode {
    min-height: calc(100vh - var(--window-top));
    background-color: #ffffff;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .avatar {
        width: 60px;
        height: 60px;
        border-radius: 6px;
    }

    .name {
        font-weight: 400;
        font-size: 16px;
        color: #3D3D3D;
        margin: 12px 0 25px;
    }

    .qr_code {
        width: 210px;
        height: 210px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}
</style>